<template id="collage">
	<div class="collage_wrap">

		<!--头部-->
		<div class="collage_header">
			<img src="../../assets/images/collage/collage_banner.png" />
			<div class="collage_title">
				<router-link to="/about_class">首页</router-link>
				<p>结伴瑜伽</p>
			</div>
		</div>
		<!--头部结束-->

		<!--版心-->
		<div class="collage_page">

			<!--请选择教练-->
			<div class="collage_trainer">
				<dl>
					<dt><img src="../../assets/images/class/about_coach.png"/><span>请选择教练</span></dt>
					<dd>
						<router-link to="/about_class"><img src="../../assets/images/collage/collage_trainer.png" /></router-link>
					</dd>
				</dl>
			</div>
			<!--请选择教练结束-->

			<!--课程-->
			<div class="collage_course">
				<p>课程</p><span>结伴瑜伽</span>
			</div>
			<!--课程结束-->
			<!--时长-->
			<div class="collage_course">
				<p>时长</p><span>60分钟</span>
			</div>

			<!--时长结束-->

			<!--节数/价格-->
			<div class="collage_price">
				<p>节数<span><font>1</font>节</span></p>
				<p>价格<span><font v-model="addNum">{{price*addNum}}</font>元</span></p>

			</div>
			<!--节数/价格结束-->

			<!--人数-->
			<div class="collage_number">
				<div class="collage_number_top">
					<a href="#" @click="add(2)">2人</a>
					<a href="#" @click="add(2)">3人</a>
					<a href="#">4人</a>
					<a href="#">5人</a>
				</div>
				<div class="collage_number_bottom">
					<a href="#">6~10人</a>
					<a href="#">11~20人</a>
					<a href="#">20人以上</a>

				</div>

			</div>
			<!--人数结束-->

			<!--地址-->
			<div class="collage_address">
				<p>地址</p>
				<div class="collage_site">

					<span>北京市西城区广莲路1号北京建工大厦</span>
					<router-link to="/appointment_coach"><img src="../../assets/images/collage/icon_site.png" /></router-link>

				</div>
			</div>
			<!--地址结束-->

			<!--备注/请输入您需要备注的信息-->
			<div class="collage_remark">
				<p>备注:</p>
				<input type="text" name="" id="" placeholder="请输入您需要备注的信息" />
			</div>
			<!--备注/请输入您需要备注的信息结束-->

			<!--加入购物车/立即预约-->
			<div class="collage_btn">
				<button>加入购物车</button>
				<button>立即预约</button>
			</div>
			<!--加入购物车/立即预约结束-->

		</div>
		<!--版心结束-->

	</div>
</template>

<script>
	export default {
		data() {
			return {

				addNum: 1,
				price: 296,

			}
		},

		methods: {

			add(n) {
				parseInt(this.addNum),
				this.addNum=n
//				console.log(this.price)
//console.log(this.addNum)
			}
		}
	}
</script>

<style scoped>
	@import "../../assets/css/collage.css";
	
</style>